<template>
  <div class="text-center py-12">
    <div class="text-text-secondary mb-4">
      <svg class="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z" />
      </svg>
    </div>
    <h3 class="text-text-secondary font-medium mb-2">{{ title || t('login.noUsers') }}</h3>
    <p class="text-text-secondary text-sm mb-4">{{ message || t('login.noUsersMessage') }}</p>
    <button
      class="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary-hover transition-colors"
      @click="$emit('create-user')">
      {{ actionText || t('login.createUser') }}
    </button>
  </div>
</template>

<script setup lang="ts">
import { t } from '@/i18n';

interface Props {
  title?: string;
  message?: string;
  actionText?: string;
}

withDefaults(defineProps<Props>(), {
  title: '',
  message: '',
  actionText: ''
});

defineEmits<{
  'create-user': [];
}>();
</script>
